<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录 - 云书签</title>
    <link rel="stylesheet" href="auth.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <div class="auth-container">
        <div class="auth-card">
            <div class="auth-header">
                <div class="logo">
                    <i class="fas fa-cloud"></i>
                    <h1>云书签</h1>
                </div>
                <p class="subtitle">智能导航与云收藏</p>
            </div>

            <!-- 登录表单 -->
            <div id="loginForm" class="auth-form active">
                <h2>登录账户</h2>
                <form id="loginFormElement">
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" id="loginUsername" name="login" placeholder="用户名或邮箱" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="loginPassword" name="password" placeholder="密码" required>
                            <button type="button" class="toggle-password" onclick="togglePassword('loginPassword')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group checkbox-group">
                        <label class="checkbox-label">
                            <input type="checkbox" id="rememberMe" name="remember_me">
                            <span class="checkmark"></span>
                            记住我（30天）
                        </label>
                    </div>
                    
                    <button type="submit" class="auth-btn primary" id="loginBtn">
                        <i class="fas fa-sign-in-alt"></i>
                        登录
                    </button>
                </form>
                
                <div class="auth-footer">
                    <p>还没有账户？ <a href="#" onclick="showRegisterForm()">立即注册</a></p>
                </div>
            </div>

            <!-- 注册表单 -->
            <div id="registerForm" class="auth-form">
                <h2>创建账户</h2>
                <form id="registerFormElement">
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-user"></i>
                            <input type="text" id="registerUsername" name="username" placeholder="用户名" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-envelope"></i>
                            <input type="email" id="registerEmail" name="email" placeholder="邮箱地址" required>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="registerPassword" name="password" placeholder="密码" required>
                            <button type="button" class="toggle-password" onclick="togglePassword('registerPassword')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="form-group">
                        <div class="input-wrapper">
                            <i class="fas fa-lock"></i>
                            <input type="password" id="confirmPassword" name="confirm_password" placeholder="确认密码" required>
                            <button type="button" class="toggle-password" onclick="togglePassword('confirmPassword')">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    
                    <div class="password-strength" id="passwordStrength">
                        <div class="strength-bar">
                            <div class="strength-fill"></div>
                        </div>
                        <span class="strength-text">请输入密码</span>
                    </div>
                    
                    <button type="submit" class="auth-btn primary" id="registerBtn">
                        <i class="fas fa-user-plus"></i>
                        注册
                    </button>
                </form>
                
                <div class="auth-footer">
                    <p>已有账户？ <a href="#" onclick="showLoginForm()">立即登录</a></p>
                </div>
            </div>
        </div>
    </div>

    <!-- 加载指示器 -->
    <div id="loadingOverlay" class="loading-overlay hidden">
        <div class="loading-spinner">
            <i class="fas fa-spinner fa-spin"></i>
            <p>处理中...</p>
        </div>
    </div>

    <!-- 通知容器 -->
    <div id="notificationContainer" class="notification-container"></div>

    <script src="auth.js"></script>
</body>
</html>
